<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>博客管理</title>
    <link rel="icon" href="/img/favicon.ico">
    <style>
        .yu-main {
            padding-top: 0px;
        }
    </style>
</head>
<body>
<div th:include="header.html"></div>

<div class="am-cf admin-main yu-main">
    <!-- sidebar start -->
    <div class="admin-sidebar am-offcanvas" id="admin-offcanvas">
        <div class="am-offcanvas-bar admin-offcanvas-bar">
            <ul class="am-list admin-sidebar-list">
                <li><a href="/admin?page=user"><span class="am-icon-table"></span> 普通用户管理</a></li>
                <li><a href="/admin?page=article"><span class="am-icon-table"></span> 文章管理</a></li>
                <li><a href="/admin?page=comment"><span class="am-icon-pencil-square-o"></span> 评论管理</a></li>
                <li><a href="/admin?page=user-disable"><span class="am-icon-table"></span> 封禁用户管理</a></li>
                <li><a href="#"><span class="am-icon-table"></span> 目录管理</a></li>
            </ul>

            <div class="am-panel am-panel-default admin-sidebar-panel">
                <div class="am-panel-bd">
                    <p><span class="am-icon-bookmark"></span> 公告</p>
                    <p>时光静好，与君语；细水流年，与君同。</p>
                </div>
            </div>
        </div>
    </div>
    <!-- sidebar end -->

    <!-- content start -->
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">目录管理</strong> /
                    <small>目录管理</small>
                </div>
            </div>

            <div class="am-g">
                <div class="am-u-sm-12">
                    <div class="am-g">
                        <div class="am-u-sm-3">
                            <h3>目录结构</h3>
                            <hr>
                            <ul id="tree" class="filetree">
                                <li><a th:class="${catalogRoot.subCatalogs} != null? 'folder' : ''"
                                       th:text="${catalogRoot.getName()}"></a>
                                    <ul th:class="${catalogRoot.subCatalogs} != null? '' : 'hide'"
                                        th:each="catalog1 : ${catalogRoot.getSubCatalogs()}">
                                        <li><a th:class="${catalog1.subCatalogs} != null? 'folder' :''" class="folder"
                                               th:text="${catalog1.getName()} "></a>
                                            <ul th:class="${catalog1.subCatalogs} != null? '' :'hide'"
                                                th:each="catalog2 : ${catalog1.getSubCatalogs()}">
                                                <li><a th:class="${catalog2.subCatalogs} != null? 'folder' : ''"
                                                       th:text="${catalog2.getName()}"></a>
                                                    <ul th:class="${catalog2.subCatalogs} != null? '' :'hide'"
                                                        th:each="catalog3 : ${catalog2.getSubCatalogs()}">
                                                        <li><a th:class="${catalog3.subCatalogs} != null? 'folder' : ''"
                                                               th:text="${catalog3.getName()}"></a>
                                                            <ul th:class="${catalog3.subCatalogs} != null? '' :'hide'"
                                                                th:each="catalog4 : ${catalog3.getSubCatalogs()}">
                                                                <li>
                                                                    <a th:class="${catalog4.subCatalogs} != null? 'folder' : ''"
                                                                       th:text="${catalog4.getName()}"></a>
                                                                    <ul th:class="${catalog4.subCatalogs} != null? '' :'hide'"
                                                                        th:each="catalog5 : ${catalog4.getSubCatalogs()}">
                                                                        <li>
                                                                            <a th:class="${catalog5.subCatalogs} != null? 'folder' : ''"
                                                                               th:text="${catalog5.getName()}"></a>
                                                                            <ul th:class="${catalog5.subCatalogs} != null? '' :'hide'"
                                                                                th:each="catalog6 : ${catalog5.getSubCatalogs()}">
                                                                                <li>
                                                                                    <a th:class="${catalog6.subCatalogs} != null? 'folder' : ''"
                                                                                       th:text="${catalog6.getName()}"></a>
                                                                                    <ul th:class="${catalog6.subCatalogs} != null? '' :'hide'"
                                                                                        th:each="catalog7 : ${catalog6.getSubCatalogs()}">
                                                                                        <li>
                                                                                            <a th:text="${catalog7.getName()}"></a>
                                                                                        </li>
                                                                                    </ul>
                                                                                </li>
                                                                            </ul>
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="am-u-sm-9">
                            <table class="am-table am-table-bd am-table-striped admin-content-table">
                                <thead>
                                <tr>
                                    <th>目录编号</th>
                                    <th>目录标题</th>
                                    <th>增加子目录</th>
                                    <th>目录重命名</th>
                                    <th>目录删除</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr th:each="catalog : ${catalogs}">
                                    <td th:text="${catalog.getId()}"></td>
                                    <td th:text="${catalog.getName()}"></td>
                                    <td>
                                        <form action="/admin-add-catalog" method="post">
                                            <input type="hidden" name="parent-catalog-id" th:value="${catalog.getId()}">
                                            <input type="hidden" th:name="${_csrf.parameterName}"
                                                   th:value="${_csrf.token}"/>
                                            <div>
                                                <input type="text" placeholder="子目录名称" name="sub-catalog-name">
                                                <input type="submit" th:value="增加子目录"
                                                       class="am-btn am-btn-primary am-btn-sm">
                                            </div>
                                        </form>
                                    </td>
                                    <td>
                                        <form action="/admin-rename-catalog" method="post">
                                            <input type="hidden" name="catalog-id" th:value="${catalog.getId()}">
                                            <input type="hidden" th:name="${_csrf.parameterName}"
                                                   th:value="${_csrf.token}"/>
                                            <div>
                                                <input type="text" placeholder="目录名称" name="catalog-name">
                                                <input type="submit" th:value="重命名"
                                                       class="am-btn am-btn-primary am-btn-sm">
                                            </div>
                                        </form>
                                    </td>
                                    <td th:class="${catalog.getSubCatalogs()} != null ? 'am-hide' : ''">
                                        <form action="/admin-delete-catalog-by-id" method="post">
                                            <input type="hidden" name="catalog-id" th:value="${catalog.getId()}">
                                            <input type="hidden" th:name="${_csrf.parameterName}"
                                                   th:value="${_csrf.token}"/>
                                            <div>
                                                <input type="submit" th:value="删除"
                                                       class="am-btn am-btn-primary am-btn-sm">
                                            </div>
                                        </form>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <footer class="admin-content-footer">
            <hr>
            <div th:include="footer.html"></div>
        </footer>
    </div>
    <!-- content end -->

</div>

<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
   data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/jquery.treeview.js" type="text/javascript"></script>
<script src="/js/amazeui.min.js"></script>
<script src="/js/app.js"></script>
<script type="text/javascript">
    $("#tree").treeview();
</script>
<link rel="stylesheet" href="/css/amazeui.min.css"/>
<link rel="stylesheet" href="/css/admin.css">
<link rel="stylesheet" href="/css/jquery.treeview.css">
</body>
</html>